<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器权重</title>
		<style>
			#d1{/*100*/
				background-color: #aaaaff;
			}
			div#d1{/*101 优先选中*/
				background-color: #ff0000;
			}
			.d{/*10*/
				background-color: #00ffff;
			}
			.d:hover{/*10+10*/
				background-color: #55ff00;
			}
			div{/*1*/
				background-color: #00aaff;
			}
			*{/*0*/
				background-color: #ffaa00 
			}
		</style>
	</head>
	<body>
		<!-- 各种选择器同时对一个元素 进行样式添加【权重】
		权重：选择器优先级【权利越大，优先执行】
		内联样式             权值1000 不建议使用
		ID选择器            权值100
		类选择器 伪类选择器  权值10
		元素选择器          权值1
		通用选择器          权值0
		权值可以进行计算：后 子 兄弟
		【不建议使用】破坏优先级-->
		<div id="d1"class="d" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quo maiores et, a voluptas nobis, alias voluptatibus cum numquam dolor, iste laborum. Accusamus blanditiis, praesentium totam tenetur ratione nihil harum.</div>
	</body>
</html>